const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');

module.exports = {
    mode: 'none',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    resolve:{
      extensions:[".js",".vue",".json"],
      alias:{
        Vue$:"vue/dist/vue.js"
      }
    },
    
    module: {
    rules: [
      {test:/\.vue$/,
        loader:'vue-loader'
      },
      {test:/\.js$/,
        loader:'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
    test: /\.s[ac]ss$/i,
    use: [
        // 将 JS 字符串生成为 style 节点
        "style-loader",
        // 将 CSS 转化成 CommonJS 模块
        "css-loader",
        // 将 Sass 编译成 CSS
        "sass-loader",
    ],
},
      {
    test: /\.less$/i,
    use: [
        // compiles Less to CSS
        'style-loader',
        'css-loader',
        'less-loader'
    ]
},
    ],
  },
plugins: [
    new HtmlWebpackPlugin({
        template: "index.html",
    }),
    new VueLoaderPlugin(),
],
devServer: {
    static: {
        directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
},
};